<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
  <style media="screen">
    body {
      height: 3000px;
    }

    .box {
      width: 100px;
      height: 100px;
      background: #CCC;
      position: absolute;
    }

    .a1 {
      background: red;
      left: 10px;
      top: 10px;
    }

    .a2 {
      background: green;
      left: 210px;
      top: 50px;
    }

    .a3 {
      background: yellow;
      left: 150px;
      top: 130px;
    }
  </style>
  <script>
    window.onload = function () {
      let aBox = document.getElementsByClassName('box');

      Array.from(aBox).forEach(box => {
        drag(box);
      });

      function drag(obj) {
        obj.addEventListener('touchstart', ev => {
          ev.preventDefault();

          let id = ev.targetTouches[0].identifier;

          let disX = ev.targetTouches[0].pageX - obj.offsetLeft;
          let disY = ev.targetTouches[0].pageY - obj.offsetTop;

          function fnMove(ev) {
            obj.style.left = ev.targetTouches[0].pageX - disX + 'px';
            obj.style.top = ev.targetTouches[0].pageY - disY + 'px';

            //ev.preventDefault();      //伏笔
          }
          function fnEnd(ev) {
            let found = false;

            Array.from(ev.changedTouches).forEach(touch => {
              if (touch.identifier == id) {
                found = true;
              }
            });

            if (found) {
              obj.removeEventListener('touchmove', fnMove, false);
              obj.removeEventListener('touchend', fnEnd, false);
            }
          }

          obj.addEventListener('touchmove', fnMove, false);
          obj.addEventListener('touchend', fnEnd, false);
        }, false);
      }
    };
  </script>
</head>

<body>
  <div class="box a1"></div>
  <div class="box a2"></div>
  <div class="box a3"></div>
</body>

</html>